<template>
    <div>
        <el-dialog
            data-dialog
            :title="dialogTitle"
            :visible.sync="currentDialogVisible"
            :close-on-click-modal="false"
            :width="width"
            top="4vh"
            @closed="handleClose"
        >
            <temp-echart
                ref="tempRef"
                :manageType="dialogTitle"
                @getTableData="getTableData"
                @handleSearch="handleSearch"
                @downloadFile="downloadFile"
                v-if="dialogTitle == '目标标准模板维护情况'"
            ></temp-echart>
            <check-report
                ref="checkReport"
                :manageType="dialogTitle"
                v-if="dialogTitle == '诊改报告'"
            ></check-report>
            <qcPoint
                ref="qcPoint"
                :manageType="dialogTitle"
                v-if="dialogTitle == '质控点预警及处理情况'"
            ></qcPoint>
            <dataCollect
                ref="dataCollect"
                :manageType="dialogTitle"
                v-if="dialogTitle == '质控点执行状态采集情况'"
            ></dataCollect>
            <qualityControl
                :manageType="dialogTitle"
                ref="qualityControl"
                @qcControl="qcControl"
                v-if="dialogTitle == '质控点标准值维护情况'"
            ></qualityControl>
            <doPlan
                ref="doPlan"
                :manageType="dialogTitle"
                v-if="dialogTitle == '执行进度分析'"
            ></doPlan>
            <searchner
                v-if="
                    dialogTitle == '目标标准模板维护情况' && indexCode != 'cm'
                "
                ref="searchRef"
                @handleSearch="handleSearch"
                @getTableData="getTableData"
                @downloadFile="downloadFile"
                :manageType="dialogTitle"
            ></searchner>
            <el-table
                class="mt-10"
                v-if="
                    dialogTitle == '目标标准模板维护情况' && indexCode != 'cm'
                "
                data-table
                v-loading="tableLoading"
                element-loading-text="数据加载中..."
                element-loading-background="rgba(255, 255, 255, 0.2)"
                stripe
                :data="tableData"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="65"
                ></el-table-column>
                <el-table-column
                    property="year"
                    label="年度"
                    v-if="
                        dialogTitle != '执行进度分析' &&
                            dialogTitle != '质控点预警及处理情况' &&
                            dialogTitle != '质控点执行状态采集情况'
                    "
                ></el-table-column>
                <el-table-column
                    v-if="
                        dialogTitle == '目标标准模板维护情况' ||
                            dialogTitle == '质控点预警及处理情况'
                    "
                    property="indexX"
                    label="层面"
                >
                    <!-- <template slot-scope="scope">{{
                        scope.row.indexX | filteType
                    }}</template> -->
                </el-table-column>
                <el-table-column
                    v-if="
                        dialogTitle == '目标标准模板维护情况' ||
                            dialogTitle == '质控点预警及处理情况'
                    "
                    property="angleName"
                    label="角度"
                ></el-table-column>
                <el-table-column
                    v-if="
                        dialogTitle == '执行进度分析' ||
                            dialogTitle == '质控点执行状态采集情况'
                    "
                    property="name"
                    label="质控点名称"
                ></el-table-column>
                <el-table-column
                    v-if="
                        dialogTitle == '执行进度分析' ||
                            dialogTitle == '质控点执行状态采集情况'
                    "
                    property="standardName"
                    label="所属目标标准"
                ></el-table-column>
                <el-table-column
                    v-if="
                        dialogTitle == '执行进度分析' ||
                            dialogTitle == '质控点预警及处理情况' ||
                            dialogTitle == '质控点执行状态采集情况'
                    "
                    property="objectName"
                    label="所属诊改对象"
                ></el-table-column>
                <el-table-column
                    v-if="
                        dialogTitle == '目标标准模板维护情况' ||
                            dialogTitle == '执行进度分析'
                    "
                    :label="
                        dialogTitle == '执行进度分析' ? '数据采集状态' : '状态'
                    "
                >
                    <template
                        slot-scope="scope"
                        v-if="dialogTitle == '目标标准模板维护情况'"
                    >
                        <div class="flex status">
                            <span class="ml-10">{{ scope.row.state }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="
                        dialogTitle == '执行进度分析' ||
                            dialogTitle == '质控点执行状态采集情况'
                    "
                    property="belongParttName"
                    label="质控点归属部门"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '执行进度分析'"
                    property="state"
                    label="完成进度"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '执行进度分析'"
                    property="standardValue"
                    label="标准值"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '执行进度分析'"
                    property="targetValue"
                    label="目标值"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '执行进度分析'"
                    property="autoUpdateValue"
                    label="业务系统数据"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '执行进度分析'"
                    property="personnelTrainingState"
                    label="填报系统数据"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '执行进度分析'"
                    property="correctValue"
                    label="校准值"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '目标标准模板维护情况'"
                    property="template"
                    label="已有模板数量(个)"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="报告类型"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="编制部门"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="诊改对象"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="编写情况"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="编写情况"
                ></el-table-column>
                <!-- <el-table-column
                    v-if="dialogTitle == '目标标准模板维护情况'"
                    property="address"
                    label="已有模板数量"
                ></el-table-column> -->
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="报告类型"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="编制部门"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="诊改对象"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '诊改报告'"
                    property="address"
                    label="编写情况"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    property="address"
                    label="质控点名称"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    property="address"
                    label="质控点归属部门"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    property="address"
                    label="标准值"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    property="address"
                    label="目标值"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    property="address"
                    label="当前值"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    label="预警状态"
                    width="110"
                >
                    <template slot-scope="scope">
                        <div class="flex-c">
                            <!-- <i
                                class="ft-16"
                                :class="
                                    scope.row.status == 0
                                        ? 'el-icon-error c-error'
                                        : 'el-icon-circle-check c-success'
                                "
                            ></i> -->
                            <span>{{
                                scope.row.status == 0 ? "未处理" : "已处理"
                            }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    property="address"
                    label="预警总次数"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    property="address"
                    label="预警处理次数"
                ></el-table-column>
                <el-table-column
                    v-if="dialogTitle == '质控点预警及处理情况'"
                    label="操作"
                    width="100"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button type="text" @click="lockDetail(scope.row)"
                            >查看明细</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器-->
            <pagination
                v-show="
                    total > 0 &&
                        dialogTitle == '目标标准模板维护情况' &&
                        indexCode != 'cm'
                "
                :total="total"
                :current.sync="page.pageIndex"
                :size.sync="page.pageSize"
                @pagination="pagination"
            />
        </el-dialog>
    </div>
</template>

<script>
import tempEchart from '@/components/echarts/cockpit/tempManage';
import checkReport from '@/components/echarts/cockpit/checkReport';
import qualityControl from '@/components/echarts/cockpit/qualityControl';
import doPlan from '@/components/echarts/cockpit/doPlan';
import qcPoint from '@/components/echarts/cockpit/qcPoint';
import dataCollect from '@/components/echarts/cockpit/dataCollect';
import {
    getPagingQuery,
    getPagingQueryExport,
    getStandardManagementExport
} from '@/api/cockpit';
import { mapState } from 'vuex';
export default {
    name: 'Dialog',
    components: {
        tempEchart,
        checkReport,
        qualityControl,
        doPlan,
        qcPoint,
        dataCollect
    },
    props: {
        dialogTitle: {
            required: true,
            type: String,
            default: ''
        },
        dialogVisible: {
            required: true,
            type: Boolean,
            default: false
        },
        width: {
            required: true,
            type: String,
            default: '40%'
        }
    },
    filters: {},
    data () {
        return {
            page: {
                pageIndex: 1,
                pageSize: 10
            },
            total: 0,
            tableData: [],
            searchParams: {},
            tableDataType: 'init',
            tableLoading: false
        };
    },
    computed: {
        ...mapState({
            indexCode: state => state.cockpit.indexCode,
            code: state => state.cockpit.code,
            year: state => state.cockpit.year,
            stateVal: state => state.cockpit.stateVal
        }),
        currentDialogVisible: {
            get () {
                return this.dialogVisible;
            },
            set () {
                this.$emit('closeDialog');
            }
        }
    },
    created () {
        this.getTableData('init');
    },
    mounted () {
        // console.log('dialog');
    },
    methods: {
        init () {},
        initEcharts () {
            if (this.dialogTitle === '目标标准模板维护情况') {
                this.$refs.tempRef.initEchart();
                this.getTableData('init');
            }
            if (this.dialogTitle === '诊改报告') {
                this.$refs.checkReport.initEchart();
                this.$refs.checkReport.getTableData('init');
            }
            if (this.dialogTitle === '质控点预警及处理情况') {
                this.$refs.qcPoint.initEchart();
                this.$refs.qcPoint.getTableData('init');
            }
            if (this.dialogTitle === '质控点执行状态采集情况') {
                this.$refs.dataCollect.initEchart();
                this.$refs.dataCollect.getTableData('init');
            }
            if (this.dialogTitle === '质控点标准值维护情况') {
                this.$refs.qualityControl.initEchart();
                // this.$refs.qualityControl.getTableData('init');
            }
            if (this.dialogTitle === '执行进度分析') {
                if (['zlzx', 'cm', 'jxdw'].includes(this.indexCode)) {
                    this.$refs.doPlan.initEchart();
                }
                this.$refs.doPlan.getTableData('init');
            }
        },
        handleClose () {
            this.$refs.searchRef && this.$refs.searchRef.reset();
            this.$refs.checkReport && this.$refs.checkReport.reset();
            this.$refs.qualityControl &&
                (this.$refs.qualityControl.echartCode = null);
                this.$refs.qcPoint &&
                this.$refs.qcPoint.reset()
            // console.log('clsose');
        },
        // 分页器参数回传方法
        pagination (page) {
            console.log(page, 'params');
            this.page = page;
            this.getTableData(this.tableDataType);
        },
        getParams (isSearch) {
            const defaultParam = {
                year: this.year,
                indexCode: this.indexCode,
                indexX: this.code,
                ...this.page
            };
            let params;
            if (isSearch === 'init') {
                params = { ...defaultParam, init: 'init' };
            }
            if (isSearch === 'search') {
                params = {
                    ...defaultParam,
                    ...this.searchParams,
                    sear: 'search'
                };
            }
            if (isSearch === 'echart') {
                params = {
                    ...defaultParam,
                    ...this.searchParams,
                    echart: 'echart'
                };
            }
            return params;
        },
        // searchType: 'search' 为查询参数 ，'init' 为初始参数,'echart' 为echarts查询参数
        getTableData (isSearch) {
            console.log(this.stateVal, 'stateVal');
            if (this.indexCode !== 'zlzx') return;
            this.tableLoading = true;
            // console.log(searchType, 'searchType');
            getPagingQuery(this.getParams(isSearch)).then(res => {
                console.log(res, 'getTableData');
                this.tableData = res.dataList || [];
                this.total = res.total;
                this.tableLoading = false;
            });
        },
        // tempChangeSearchParams (params) {
        //     this.searchParams.indexX = params.indexX
        //     this.searchParams.state = params.state
        // },
        tempChangeSearchParams () {
            this.$refs.searchRef.reset(false);
        },
        getDoPlanTable () {},
        getQCEchart () {},
        handleSearch (search, isSearch, manageType) {
            if (isSearch === 'init') this.page.pageIndex = 1
            console.log(search, 'handleSearch', manageType);
            this.tableDataType = isSearch;
            this.searchParams = { ...search };
            if (manageType === '目标标准模板维护情况') {
                this.getTableData(isSearch);
            }
            // if (manageType === '执行进度分析') {
            //     this.getDoPlanTable();
            // }
        },
        qcControl (tableDataType, echartCode) {
            this.tableDataType = tableDataType;
            this.searchParams = { ...echartCode };
            // this.downloadFile();
            if (['zlzx', 'cm'].includes(this.indexCode)) {
                getStandardManagementExport(
                    this.searchParams
                ).then(res => {
                    this.downFile(res);
                  ['zlzx', 'cm'].includes(this.indexCode) && (this.$refs.qualityControl.downloading = false)
                });
            }
        },
        downloadFile () {
            // console.log(this.tableDataType);
            if (['zlzx', 'cm', 'jxdw'].includes(this.indexCode)) {
                getPagingQueryExport(this.getParams(this.tableDataType)).then(
                    res => {
                        this.downFile(res);
                    }
                );
            }
            this.$refs.searchRef && (this.$refs.searchRef.downloading = false);
            this.$refs.qualityControl &&
                (this.$refs.qualityControl.downloading = false);
        },
        downFile (res) {
            this.common.downloadFile(res, {
                name: `${this.year}年${this.dialogTitle}`,
                fileType: '.xlsx'
            });
           this.$refs.tempRef && ['zlzx', 'cm'].includes(this.indexCode) && (this.$refs.tempRef.downloading = false);
        },
        lockDetail (item) {}
    }
};
</script>

<style lang="scss">
.el-table tr,
.el-table {
    background-color: none !important;
}
// 鼠标滑过td上作用的样式，ie6不支持:hover伪类属性，如果是ie6要写成tr.over样式
.el-table tbody tr:hover > td {
    background-color: transparent !important;
}
// 如果td没有颜色，可以去掉，这里加上保险
.el-table__body tr > td {
    background-color: transparent;
}
.status {
    align-items: center;
}
</style>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
    border-bottom: 1px solid rgb(24, 129, 204);
    .el-dialog__title {
        color: #07a7e1 !important;
    }
}
h3 {
    color: #fff;
}
</style>
